﻿@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <script type="text/javascript" src="/js/echarts.min.js"></script>
</head>
<body>
      <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <div id="main2" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '数据统计'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);


 var myCharttwo = echarts.init(document.getElementById('main2'));
var optiontwo = {
        grid: {
          containLabel: true,
          show: false,
          right: 80,
          left: 40,
          bottom: 40,
          top: 20,
          backgroundColor: '#fff'
        },
        legend: {
          // 图例组件
          data: ['持续时间'],
          align: 'auto',
          top: 'bottom'
        },
        xAxis: {
          type: 'time',
          position: 'top', // x 轴位置
          axisTick: {
            // 隐藏刻度
            show: false
          },
          axisLine: {
            // 隐藏轴线
            show: false
          },
          splitLine: {
            // 显示网格线
            show: true
          },
          interval: 3600 * 24 * 1000 * 30 // 坐标轴分割时间间隔
        },
        yAxis: {
          axisTick: {
            // 隐藏刻度
            show: false
          },
          axisLine: {
            // 隐藏轴线
            show: false
          },
          data: [
            '项目一',
            '项目二',
            '项目三',
            '项目四',
            '项目五',
            '项目六',
            '项目七'
          ].reverse()
        },
        series: [
          {
            name: '持续时间',
            type: 'bar',
            stack: 'duration',
            label: {
              normal: {
                // 显示标签的格式处理
                show: true,
                color: '#000',
                position: 'right', // 标签放置在 bar 右侧
                formatter: function (params) {
                  // 标签内容格式化
                  return params.name
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#ed7d31',
                borderColor: '#fff',
                borderWidth: 1
              }
            },
            zlevel: -1,
            data: [
              new Date('2021-01-31'),
              new Date('2021-02-25'),
              new Date('2021-03-25'),
              new Date('2021-04-01'),
              new Date('2021-04-10'),
              new Date('2021-05-25'),
              new Date('2021-07-25')
            ].reverse()
          },
          {
            name: '持续时间',
            type: 'bar',
            stack: 'duration', // 堆叠标识符，同个类目轴上系列配置相同的s tack 值可以堆叠放置
            itemStyle: {
              normal: {
                color: '#fff'
              }
            },
            zlevel: -1, // zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
            z: 9, // z值小的图形会被z值大的图形覆盖，z相比zlevel优先级更低，而且不会创建新的 Canvas
            data: [
              new Date('2021-01-01'),
              new Date('2021-01-31'),
              new Date('2021-02-25'),
              new Date('2021-03-25'),
              new Date('2021-04-01'),
              new Date('2021-04-10'),
              new Date('2021-05-25')
            ].reverse()
          }
        ]
      };
 // 使用刚指定的配置项和数据显示图表。
        myCharttwo.setOption(optiontwo);
      // 浏览器窗口大小变化，图标自适应
      window.addEventListener('resize', () => {
        myCharttwo.resize()
      })






    </script>
    <script>
    
        function loadData()
        {
           jQuery.ajax({
                        type: "post",
                        url: "GetDataAjax,
                        dataType: "json",
                        data: { "catalogId": 100},
                        success: function (data) {
                        if (data.success) {
                               // 填入数据
                               myChart.setOption({
                               xAxis: {
                                    data: data.categories
                                },
                               series: [{
                                   // 根据名字对应到相应的系列
                                   name: '销量',
                                   data: data.data
                                }]
                              });
                         }
                         alert(data.msg);
                        },
                        error: function () { alert("error"); }
                    });
        }
    
    </script>
</body>
</html>






